<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="/css/userhome.css">
	<% include link %>
</head>
<body style="background:#f4f5f7">
	<% include head %>
	<div class="userhome_top_bg" style="background-image: url(/images/myself_bg.png);">
		<% if(user.name == upUser.name) {%>
			<div class="change-bg " data-toggle="modal" data-target="#change-Modal"></div>
		<% } else if(user.name) {%>
			<a href="/user/message/<%- upUser._id%>" class="msgbt btn  btn-info active">私信</a>
			<button  class="fansbt btn  btn-info active">关注</button>
		<%}%>
		<!-- <div class="change-bg visible-xs" style="width:20px;height:20px;" data-toggle="modal" data-target="#change-Modal"></div> -->
		<div class="userhome-userhd">
			<div class="col-sm-2 ">
					<div class="userhome-userhd_imgdv">
						<img src="<%-upUser.headImgUrl%>" class="img-circle userhome-userhd_img">
					</div>
			</div>
			<div class="col-sm-8 " >
				<p class="userhome-userhd-name "><%- upUser.name %></p>
				<p class="userhome-userhd-motto ">"<%- upUser.motto %>"</p>
			</div>
		</div>
	</div>
	<div class="userhome-hd-nav">
			<div class="visible-xs userhome-hd-navbt">
				<span>个人主页</span>
				<button type="button" class="btn btn-info active " data-toggle="collapse" 
				data-target="#userhome-hd-navdiv" style="float:right;">
					<span class="glyphicon glyphicon-align-justify"></span>
				</button>
			</div>
			<div id="userhome-hd-navdiv" class="collapse navbar-collapse" style="clear: both;" >
				<a href="/userhome/<%- upUser._id %>/">
					<span class="glyphicon glyphicon-home" style="color:#00ffaa;"></span>
					主页
				</a>
				<a href="/userhome/<%- upUser._id %>/article" >
					<span class="glyphicon glyphicon-book" style="color:#ff9900;"></span>	
					博客
				</a>
				<a href="/userhome/<%- upUser._id %>/video">
					<span class="glyphicon glyphicon-facetime-video" style="color:#00bbff;"></span>	
					视频
				</a>
				<a href="/userhome/<%- upUser._id %>/fans">
					<span class="glyphicon glyphicon-heart" style="color:red;"></span>
					粉丝
				</a>
				<a href="/userhome/<%- upUser._id %>/keep">
					<span class="glyphicon glyphicon-star" style="color:#69ff00;"></span>
					收藏
				</a>
			</div>
	</div>

	<div id="userhome-hd-body">
		<% if (router == '/userhome/'+upUser._id+'/') {%>
			<% include userhomeIndex %>
		<% } else if ( router == '/userhome/'+upUser._id+'/fans' ) {%>
			<% include userFans %>
		<%} else {%>
			<% include userHomeBody %>
		<%}%>
		<div  style="clear:both;width:100%;text-align: center;">
				<ul class="pagination">
				</ul>
		</div>
	</div>

	<div class="modal fade bs-example-modal-lg" id="change-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">主题</h4>
				</div>
				<div class="modal-body">
						<div class="row ">
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg.png" data-img="/images/myself_bg.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg2.png" data-img="/images/myself_bg2.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg3.png" data-img="/images/myself_bg3.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg4.png" data-img="/images/myself_bg4.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg5.png" data-img="/images/myself_bg5.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg6.png" data-img="/images/myself_bg6.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg7.png" data-img="/images/myself_bg7.png"></div>
							<div class="col-sm-6 "><img class="userhome-theme-img" src="/images/myself_bg8.png" data-img="/images/myself_bg8.png"></div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="theme-save" data-dismiss="modal">保存</button>
				</div>
			</div>
		</div>
	</div>

	<% include foot %>
<script>
	fontpage();
	var isFans,fansPost;
	var themeBg,themeURL;
	if ('<%-upUser.themebg%>') {
		themeBg = '<%-upUser.themebg%>';
		$('.userhome_top_bg').css('background-image','url('+themeBg+')');
	} else {
		themebg = '/images/myself_bg.png';
	}

	if ($('.userhome-theme-img')) {
		$('.userhome-theme-img').click(function (){
			$('.userhome-theme-img').css('border-color','#e1e1e8');
			$(this).css('border-color','#0099FF');
			themeURL = $(this).data('img');
		});
	}

	$('#theme-save').click(function (){
		$.ajax({
				url:'/userhome/cgtheme',
				type:'post',
				data:{
             	 theme:{
             	 	'themebg':themeURL,
             	 }
             	},
				success:function(data){
					$('.userhome_top_bg').css('background-image','url('+themeURL+')');
					themeBg = themeURL;
				}
		});
	});


	if('<%-isFans%>'=="true"){
		isFans  = true;
		fansPost = '/userhome/refans';
		$('.fansbt').html('已关注');
	} else {
		isFans = false;
		fansPost = '/userhome/addfans';
		$('.fansbt').html('关注');
	}
	if($('.userhome-body-img')){
			img_height = ($('.userhome-body-img').width() )*10/16;
			$('.userhome-body-img').css('height',img_height);
	}
	window.onresize=function(){
		if($('.userhome-body-img')){
			img_height = ($('.userhome-body-img').width() )*10/16;
			$('.userhome-body-img').css('height',img_height);
		}
	}

	function fontpage(){

		if($(".pagination").length > 0 ){  
        var pagecount = '<%- count %>';  
        var pagesize = 16;  
        var currentpage = parseInt( '<%- page %>');  
        var counts,pagehtml="";  
        if(pagecount%pagesize==0){  
            counts = parseInt(pagecount/pagesize);  
        }else{  
            counts = parseInt(pagecount/pagesize)+1;  
        }  
 
        if(pagecount<=pagesize){pagehtml="";}  
        
        if(pagecount>pagesize){  
            if(currentpage>1){  
                pagehtml+= '<li><a href="<%-router%>?page='+(currentpage-1)+'">«</a></li>';  
            }  
            for(var i=0;i<counts;i++){  
                if(i>=(currentpage-3) && i<(currentpage+3)){  
                    if(i==currentpage-1){  
                        pagehtml+= '<li class="active"><a href="<%-router%>?page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }else{  
                        pagehtml+= '<li><a href="<%-router%>?page='+(i+1)+'">'+(i+1)+'</a></li>';  
                    }  
                      
                }  
            }  
            if(currentpage<counts){  
                pagehtml+= '<li><a href="<%-router%>?page='+(currentpage+1)+'">»</a></li>';  
            }  
        }  
        $(".pagination").html(pagehtml);  
    }  
	}

	if($('.userhome-keepdel').length > 0){
		$('.userhome-keepdel').click(function() {
			var self = $(this);
			var thisVa = $(this).data('va');
			var thisType = $(this).data('type');
			var name = '<%-user.name%>'
			$.ajax({
				url:'/userhome/delkeep',
				type:'post',
				data:{
             	 mydelete:{
             	 	'name': name,
             	 	'type': thisType,
             	 	'kID': thisVa,
             	 }
             	},
				success:function(data){
					self.parents('.delpr').remove();
				}
			});
			
		});
	}

	if ($('.fansbt').length > 0) {
		$('.fansbt').click(function() {
			var self = $(this);
			var fid = '<%-user._id%>';
			var name = '<%-upUser.name%>';
				$.ajax({
					url:fansPost,
					type:'post',
					data:{
	             	 addfans:{
	             	 	'name': name,
	             	 	'FID': fid,
	             	 }
	             	},
					success:function(data){
						window.location.reload();
					}
				});
		});
	}

	if($('.userhome-index-textarea').length > 0){
		var textstr;
		$('.userhome-index-textarea').focus(function(){
			$(this).css('border-color','#00a1d6');
		});
		$('.userhome-index-textarea').blur(function(){
			$(this).css('border-color','transparent');
			$(this).change(function(){
				if ($(this).val().trim().length == 0) {
					textstr='';
				} else {
					textstr = $(this).val();
					textstr = textstr.replace(/\s+/g, ' ');
				}

				$.ajax({
					url:'/userhome/notice',
					type:'post',
					data:{
	             	 notice:{
	             	 	'notice':textstr,
	             	 }
	             	},
					success:function(data){
						$(this).val(textstr);
					}
				});
			});
		});
	}

</script>
</body>
</html>
